<template>
  <el-dialog
    title="分配用户"
    v-model="assignVisible"
    width="1200px"
    append-to-body
    top="5vh"
  >
    <el-tabs type="border-card" v-model="assignType">
      <el-tab-pane label="身份存储" name="choose">
        <c-form
          :form="assignForm"
          :label-width="'100px'"
          :inline="false"
          ref="formRef"
        ></c-form>
      </el-tab-pane>
      <el-tab-pane label="固定值" name="input">
        <c-form
          :form="varForm"
          :label-width="'100px'"
          :inline="false"
          ref="varFormRef"
        ></c-form>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="assignVisible = false">取 消</el-button>
        <el-button type="primary" @click="outputAssignUser">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {
  userTaskAssignForm,
  userTaskVarForm,
} from "@/components/bpmn/components/bpmnPropertiesPanel/forms";
import Form from "@/components/Form.vue";
import { mapActions, mapState } from "vuex";

export default {
  name: "userTaskDialogForm",
  components: {
    "c-form": Form,
  },
  props: {
    saveAssignUser: {
      type: Function,
    },
    businessObj: {
      type: Object,
    },
    modeler: {
      type: Object,
    },
  },
  data() {
    return {
      assignForm: userTaskAssignForm.call(this),
      varForm: userTaskVarForm.call(this),
      assignTitle: "分配用户",
      assignVisible: false,
      assignType: "choose",
    };
  },
  computed: mapState({
    roleList: (state) => state.flowDesignStore.roleList,
    orgList: (state) => state.flowDesignStore.orgList,
    userList: (state) => state.flowDesignStore.userList,
  }),
  methods: {
    ...mapActions("flowDesignStore", [
      "getRoleList",
      "getUserList",
      "getOrgList",
    ]),
    // 选择角色后，获取该角色下的用户
    async changeRole(node, resolve) {
      if (node.level === 1) {
        const rst = await this.getUserList({
          roleId: node.value,
        });
        if (rst.status) {
          resolve(rst.data);
        } else {
          this.$message({
            type: "warning",
            message: rst.message,
          });
        }
      }
    },
    // 输出表单信息
    outputAssignUser() {
      if (this.assignType === "choose") {
        const models = this.assignForm.models;
        this.assignVisible = false;
        const checkedUsers = Array.from(this.assignForm.models.checkedUsers);
        const dataList = [
          {
            name: "starter",
            value: [
              {
                key: "1",
                label: "${username}",
              },
            ],
          },
          {
            name: "assignee",
            value: checkedUsers,
          },
          {
            name: "candidateUsers",
            value: checkedUsers,
            length: checkedUsers.length,
          },
          {
            name: "candidateGroups",
            value: models.groupList,
          },
        ];
        this.saveAssignUser(dataList[models.assignType - 1], "choose");
      } else {
        const models = this.varForm.models;
        this.assignVisible = false;
        const dataList = [
          {
            name: "assignee",
            value: [models.singleUser],
          },
          {
            name: "candidateUsers",
            value: models.chooseUserList,
            length: models.chooseUserList.length,
          },
          {
            name: "candidateGroups",
            value: models.groupList,
          },
        ];
        this.saveAssignUser(dataList[models.assignType - 1], "input");
      }
    },
    // 对话框显示后，数据回填
    async open() {
      const businessObj = this.businessObj;
      if (businessObj.assignType === "input") {
        const models = this.varForm.models;
        this.assignType = "input";
        if (businessObj.assignee) {
          models.assignType = "1";
          models.singleUser = businessObj.assignee;
        } else if (businessObj.candidateUsers) {
          models.assignType = "2";
          models.chooseUserList = businessObj.candidateUsers.split(",");
        } else if (businessObj.candidateGroups) {
          models.assignType = "3";
          models.groupList = businessObj.candidateGroups.split(",");
        } else {
          models.assignType = "1";
        }
      } else {
        const models = this.assignForm.models;
        const items = this.assignForm.items;
        this.assignType = "choose";
        if (businessObj.assignee) {
          models.assignType =
            businessObj.assignee === "${username}" ? "1" : "2";
          if (businessObj.assignee !== "${username}") {
            this.$nextTick(() => {
              items.checkedUsers.options = [{ label: businessObj.assignee }];
              models.checkedUsers = new Set([businessObj.assignee]);
            });
          }
        } else if (businessObj.candidateUsers) {
          models.assignType = "3";
          const usernames = businessObj.candidateUsers.split(",");
          this.$nextTick(() => {
            models.checkedUsers = new Set(usernames);
            items.checkedUsers.options = usernames.map((item) => ({
              label: item,
            }));
          });
        } else if (businessObj.candidateGroups) {
          models.groupList = businessObj.candidateGroups.split(",");
          models.assignType = "4";
        } else {
          models.assignType = "1";
        }
      }
    },
    // 选择用户
    rowClick(row) {
      const { models, items } = this.assignForm;
      if (models.assignType === "2") {
        items.checkedUsers.options = [
          {
            id: row.id,
            label: row.value,
          },
        ];
        models.checkedUsers = new Set([row.value]);
      } else if (models.assignType === "3") {
        if (!models.checkedUsers.has(row.label)) {
          items.checkedUsers.options.push({
            id: row.id,
            label: row.value,
          });
          models.checkedUsers.add(row.value);
        }
      }
    },
  },
  async mounted() {
    let roleList = this.roleList;
    let orgList = this.orgList;
    if (!roleList) {
      const rst = await this.getRoleList({ roleType: 2 });
      roleList = rst.data;
    }
    roleList.forEach((item) => {
      item.value = item.id;
    });
    this.assignForm.items.groupList.options = roleList;
    if (!orgList) {
      await this.getOrgList();
    }
  },
  watch: {
    assignVisible: function(val) {
      if (val) {
        this.open();
      }
    },
    "assignForm.models.assignType": function(val) {
      val = parseInt(val);
      const items = this.assignForm.items;
      items.checkedUsers.hide = items.chooseUserList.hide = !(val & 2);
      items.groupList.hide = val !== 4;
      items.checkedUsers.options = [];
    },
    "varForm.models.assignType": function(val) {
      val = parseInt(val);
      const items = this.varForm.items;
      items.singleUser.hide = val !== 1;
      items.chooseUserList.hide = val !== 2;
      items.groupList.hide = val !== 3;
    },
  },
};
</script>

<style scoped></style>
